<template>
  <div class="f-fr box">
    <header>智能定位预警系统平台</header>
     <input   placeholder="请输入账号" type="text" class="text" v-model="username"></input>
      <input  placeholder="请输入密码" type="password" class="text" v-model="password"></input>
      <div class="error-tip" v-if="tip">{{tip}}</div>
      <a class="login-btn" :class="(username&&password)?'active':''"  @click="login">登录</a>
      <div class="set-info">
          <label>
              <input type="checkbox" class="checkbox" v-model="isRemember">记住密码
          </label>
          <label @click="forget">忘记密码</label>
      </div>
  </div>
</template>
<script>
    import { Message } from 'element-ui'
    let timer
   export default{
       data(){
           return{
               username:'',
               password:'',
               isFetch:false,
               second:60,
               tip:'',
               isRemember:true,  //默认记住密码
           }
       },
       created(){
           this.username=this.getCookie('admin_username')
           this.password=this.getCookie('admin_password')
//           if(!this.getQueryString('from')&&this.username&&this.password&&this.isRemember) this.login()
       },
       mounted(){
           document.onkeydown=event=>{
               let e=event?event:(window.event?window.event:null)
               if(e.keyCode==13)  this.login()
           }
       },
       watch:{
           username(val){
               if(val) this.tip=''
           },
           password(val){
               if(val) this.tip=''
           },
           code(val){
               if(val) this.tip=''
           },
       },
       methods:{
           getQueryString(name)
           {
               var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
               var r = window.location.search.substr(1).match(reg);
               if(r!=null) return  unescape(r[2]); return null;
           },
           //设置cookie
           setCookie(name,value,days){
               name=escape(name)
               value=escape(value)
               var expires=new Date()
               expires.setTime(expires.getTime()+days*3600000*24)
               document.cookie=name+"="+value+";expires="+ expires.toUTCString()
           },
           //获取cookie值，键值
           getCookie(name){
               name=escape(name)
               name+="="
               var allcookies=document.cookie
               var pos=allcookies.indexOf(name)
               if(pos!=-1){
                   var start=pos+name.length
                   var end=allcookies.indexOf(";",start)
                   if(end==-1) end=allcookies.length
                   var value=allcookies.substring(start,end)
                   return (value)
               }else  return "";
           },
           //删除cookie,其实就是设置其失效
           deleteCookie(name){
               this.setCookie(name,'',-1)
           },
           //登录或注册
           login(){
               if(!this.username){
//                   this.tip='请先输入账号'
                   return
               }
               if(!this.password){
//                   this.tip='请先输入密码'
                   return
               }
               this.$http.post('admin_login/login',{
                   account:this.username,
                   pwd:this.password,
               }).then(res=>{
                   if(!res.result){
                       //cookie里设置账户密码,3天免登录
                       if(this.isRemember){
                           if(!this.getCookie('admin_username'))   this.setCookie('admin_username',this.username,3)
                           if(!this.getCookie('admin_password'))     this.setCookie('admin_password',this.password,3)
                           this.setCookie('admin_isRemember','true',3)
                       }else{
                           this.deleteCookie('admin_username')
                           this.deleteCookie('admin_password')
                           this.deleteCookie('admin_isRemember')
                       }
                       localStorage.setItem('location_manage_web_token',JSON.stringify(res.data))
                       window.location.href='index.html'
                   }else{
                       this.tip=res.msg
                       return
                   }
               })
           },
           forget(){
               //弹出之前先关闭所有实例
               Message.closeAll()
               Message({
                   message: '忘记密码，请联系管理员处理，谢谢！',
                   type: 'warning',
                   showClose:true,
                   duration:6000,
               })
           }
       },
   }
</script>
<style lang="scss" scoped>
 .box{
     position:relative;
     margin-right:100px;
     top:50%;
     transform: translateY(-50%);
     width:288px;
     height:323px;
     background:#fff;
     border-radius:2px;
     header{
         height:74px;
         line-height:74px;
         color:#4f4f4f;
         font-size:18px;
         text-align: center;
         font-weight: bold;
     }
     .text{
         width:240px;
         height:35px;
         text-indent: 10px;
         font-size:12px;
         display:block;
         margin:0 auto 20px auto;
     }
     .code-area{
         width:240px;
         height:35px;
         font-size:12px;
         margin:0 auto 15px auto;
         .code{
             width:144px;
             height:35px;
             text-indent: 10px;
             font-size:12px;
             margin-right:2px;
         }
         .min-btn{
             display:inline-block;
             color:#fff;
             font-size:12px;
             text-align: center;
             width:88px;
             height:37px;
             line-height:37px;
             border-radius:2px;
             background: #0085EE;
             &.no{
                    background:#ddd;
              }

         }
     }
    .error-tip{
        width:240px;
        height:20px;
        line-height:20px;
        text-align: center;
        color: #E33244;
        font-size:12px;
        margin:0 auto;
    }
    .login-btn{
        display:block;
        margin:25px auto 5px auto;
        width:240px;
        height:35px;
        line-height:35px;
        font-size:14px;
        text-align: center;
        color:#fff;
        border-radius:2px;
        background:#ddd;
        &.active{
           background:#0085EE;
        }
    }

    .set-info{
        margin:0 auto;
        width:240px;
        height:20px;
        line-height:20px;
        font-size:12px;
        color:#888;
        label{
            cursor: pointer;
        }
        label:nth-of-type(2){
              float:right;
              margin-right:0 ;
        }
        .checkbox{
            vertical-align: middle;
            margin-right:5px;
        }
    }

 }
</style>